import React, { memo, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
// import Backsnow from "@/components/backsnow";
import Headernav from "@/components/headernav";
import RenderRoutes from "@/router/renderRoutes";
import Backsnow from "@/components/backsnow";
import Allfooter from "@/components/Allfooter";
import Music from "@/components/music";
import { getblogtypeactionasync } from "./store/actioncreater";
import { Newhomewrap } from "./style";
import { CSSTransition } from "react-transition-group";
export default memo(function Newhome(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getblogtypeactionasync());
  }, [dispatch]);
  //音乐播放器是否显示
  const [musicshow, setMusicshow] = useState(false);
  return (
    <Newhomewrap>
      <img
        src="http://www.lmlblog.com/winter/templets/xq/images/logo.png"
        alt=""
      />
      <div className="link">心情日记_心情语录随笔-个人博客模板</div>
      <div className="fon">看了太多的励志故事,突然发现梦想还是与自己都无关</div>
      <Backsnow></Backsnow>
      <Headernav></Headernav>
      <CSSTransition in={musicshow} classNames="card2" timeout={5000}>
        <div className="player">
          <Music></Music>
          <span
            class="iconfont icon-xuanzeqixiayige"
            onClick={(e) => {
              setMusicshow(!musicshow);
              console.log(12);
            }}
          ></span>
        </div>
      </CSSTransition>
      {RenderRoutes(props.route)}
      <Allfooter></Allfooter>
    </Newhomewrap>
  );
});
